let leftArrow = document.querySelector(".leftArrow");
let rightArrow = document.querySelector(".rightArrow");
let pointList = document.querySelectorAll(".pointBox li");
let point = document.querySelector(".pointBox ol");
let ul = document.querySelector(".carouselBox ul");
let nowIndex = 0;
let carouselBox = document.querySelector(".carouselBox");

leftArrow.addEventListener("click", function () {
    // nowIndex++;
    (++nowIndex == ul.childElementCount) && (nowIndex = 0);
    ul.style.transform = `translateX(-${nowIndex}00%)`;

    pointList.forEach(function (item, index, obj) {

        if (0 < nowIndex) {
            obj[nowIndex - 1].classList.remove("active");
        }
        if (nowIndex == 0) {
            obj[2].classList.remove("active");
        }

        obj[nowIndex].classList.add("active");
    })

})

rightArrow.addEventListener("click", function () {
    (--nowIndex < 0) && (nowIndex = ul.childElementCount - 1);
    ul.style.transform = `translateX(-${nowIndex}00%)`;


    pointList.forEach(function (item, index, obj) {


        if (2 > nowIndex) {
            obj[nowIndex + 1].classList.remove("active");
        }
        if (nowIndex == 2) {
            obj[0].classList.remove("active");
        }

        obj[nowIndex].classList.add("active");

    })


})

pointList.forEach(function (item, index, obj) {
    item.addEventListener("click", function (e) {
        pointList.forEach(function (item) {
            item.classList.remove("active");
        })
        item.classList.add("active");
        (index == ul.childElementCount) && (nowIndex = 0);
        ul.style.transform = `translateX(-${index}00%)`;
    })

})

let ziDong;
function aP () {
    ziDong = setInterval(function () {
        nowIndex++;
        ul.style.transform = `translateX(-${nowIndex % ul.childElementCount}00%)`;
        pointList.forEach(function (item) {
            item.classList.remove("active");
        })
        pointList[nowIndex % ul.childElementCount].classList.add("active");
    }, 2000)
}
aP();

carouselBox.addEventListener("mouseenter", function () {
    clearInterval(ziDong);
})

carouselBox.addEventListener("mouseleave", function () {
    aP();
})





